<!--
 * @Author: gao_m3
 * @Date: 2021-04-23 16:52:35
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-18 09:46:53
 * @Descripttion: 
-->
<template>
  <div class="container">
    <div v-if="waitFlag" class="access-table">
      <div class="button-line">
        <fks-button
          v-if="type"
          class="left_black"
          :type="!flag ? 'primary' : ''"
          @click="choose(false)"
        >
          {{ LANG.IP_BLACK }}
        </fks-button>
        <fks-button
          v-if="type"
          class="right_white"
          :type="flag ? 'primary' : ''"
          @click="choose(true)"
        >
          {{ LANG.IP_WHITE }}
        </fks-button>
        <span class="tips">
          {{
            !type
              ? LANG.TIME_BUTTON_TIP
              : flag
              ? LANG.WHITE_TIP
              : LANG.BLACK_TIP
          }}
        </span>
        <fks-button
          v-permission="['access:add']"
          style="float: right"
          icon="fks-icon-plus"
          @click="handleNewRule"
        >
          {{ !type ? LANG.NEW_TIME : LANG.NEW_ADDRESS }}
        </fks-button>
      </div>

      <fks-table v-loading="loading" :data="tableData" class="table">
        <fks-table-column type="index" width="50" align="center" label="#" />
        <fks-table-column
          v-if="!type"
          :label="LANG.TIME_INFO"
          prop="time"
          min-width="200"
          align="left"
        >
          <template slot-scope="scope">
            {{ scope.row.time[0] + ' - ' + scope.row.time[1] }}
          </template>
        </fks-table-column>
        <fks-table-column
          v-if="type && flag"
          align="left"
          :label="LANG.WHITE_INFO"
          prop="ipAddress"
          min-width="200"
        />
        <fks-table-column
          v-if="type && !flag"
          align="left"
          :label="LANG.BLACK_INFO"
          prop="ipAddress"
        />
        <fks-table-column :label="LANG.STATUS" prop="flag">
          <div slot-scope="scope">
            <fks-tag v-if="scope.row.flag && !scope.row.status" type="success">
              {{ LANG.ENABLE }}
            </fks-tag>
            <fks-tag v-if="!scope.row.flag && !scope.row.status" type="danger">
              {{ LANG.DISABLE }}
            </fks-tag>
            <fks-tag v-if="scope.row.status" type="info">
              {{ LANG.EXPIRED }}
            </fks-tag>
          </div>
        </fks-table-column>
        <fks-table-column
          :label="LANG.ADDITIONAL_INFO"
          prop="info"
          min-width="200"
          align="left"
        />
        <fks-table-column :label="LANG.OPERATION" width="150" align="left">
          <div slot-scope="scope">
            <fks-button
              v-if="!scope.row.flag && !scope.row.status"
              v-permission="['access:enable']"
              type="text"
              @click="clickEnable(scope.$index, true)"
            >
              {{ LANG.ENABLE }}
            </fks-button>
            <fks-button
              v-if="scope.row.flag && !scope.row.status"
              v-permission="['access:disable']"
              type="text"
              @click="clickEnable(scope.$index, false)"
            >
              {{ LANG.DISABLE }}
            </fks-button>
            <fks-button
              v-permission="['access:edit']"
              type="text"
              @click="editItem(scope.$index, scope.row)"
            >
              {{ LANG.EDIT }}
            </fks-button>
            <fks-button
              v-permission="['access:delete']"
              danger-text
              @click="deleteItem(scope.$index, scope.row)"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </div>
        </fks-table-column>
      </fks-table>
      <fks-pagination
        class="pagination"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <new-rule
      :ip-black="ipBlack"
      :ip-white="ipWhite"
      :data="data"
      :type="type"
      :flag="flag"
      :show="show"
      :handle-type="handleType"
      @close="close"
      @submit="submit"
    />
  </div>
</template>

<script>
import { LATEST_CLIENT_CONFIG } from '@/store/State/stateTypes'
import {
  GET_LATEST_CLIENT_CONFIG,
  PUT_CLIENT_CONFIG
} from '@/store/Action/actionTypes'

import NewRule from './NewRule'
export default {
  name: 'LimitPage',
  components: { NewRule },
  props: {
    type: {
      //时间-地址
      type: Boolean,
      default: false
    }
  },
  data() {
    // let that = this
    return {
      tableData: [],
      pageSize: 20,
      total: 0,
      currentPage: 1,
      flag: false, // 黑/白
      waitFlag: false, //优化黑白切换时按钮瞬闪
      show: false,
      handleType: false, //edit-false new-true
      settings: {},
      data: {},
      index: 0,
      dataList: [],
      loading: true,
      ipBlack: [],
      ipWhite: []
      //additionJSON: {}
    }
  },
  computed: {
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    }
  },
  watch: {
    latestClientConfig(nval) {
      let additionalInfo = nval.additionalInformation
      this.settings = Object.assign({}, additionalInfo.accessLimit)
      if (!this.settings.accessLimitTimes) this.settings.accessLimitTimes = []
      if (!this.settings.ipBlackList) this.settings.ipBlackList = []
      if (!this.settings.ipWhiteList) this.settings.ipWhiteList = []
      this.waitFlag = true
      this.setTable()
    }
  },
  mounted() {
    this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
  },
  methods: {
    //启用、禁用
    clickEnable(index, flag) {
      let tips, confirm
      confirm = flag ? this.LANG.ENABLE_SUCCESS : this.LANG.DISABLE_SUCCESS
      if (!this.type) {
        if (flag) tips = this.LANG.ENABLE_ACCESS_TIP
        else tips = this.LANG.DISABLE_ACCESS_TIP
      } else {
        if (flag) {
          tips = this.LANG.ENABLE_ADR_TIP
        } else {
          tips = this.LANG.DISABLE_ADR_TIP
        }
      }
      this.$confirm(tips, this.LANG.CONFIRM, {
        type: 'warning'
      })
        .then(() => {
          if (!this.type) {
            this.settings.accessLimitTimes[
              (this.currentPage - 1) * this.pageSize + index
            ].flag = flag
          }
          if (this.type && !this.flag) {
            this.settings.ipBlackList[
              (this.currentPage - 1) * this.pageSize + index
            ].flag = flag
          }
          if (this.type && this.flag) {
            this.settings.ipWhiteList[
              (this.currentPage - 1) * this.pageSize + index
            ].flag = flag
          }
          this.setClientConfig(confirm)
        })
        .catch(() => {})
    },
    editItem(index, item) {
      this.handleType = false
      this.show = true
      this.data = item
      this.index = (this.currentPage - 1) * this.pageSize + index
    },
    pagePrev(len) {
      if (len % this.pageSize == 0) {
        this.currentPage--
        this.handleCurrentChange(this.currentPage)
      }
    },
    submit(val) {
      if (!this.type) {
        if (!this.settings.accessLimitTimes) this.settings.accessLimitTimes = []
        if (!this.handleType) {
          this.settings.accessLimitTimes.splice(this.index, 1, val)
        } else {
          this.settings.accessLimitTimes.push(val)
        }
      }
      if (this.type && !this.flag) {
        if (!this.settings.ipBlackList) this.settings.ipBlackList = []
        if (!this.handleType) {
          this.settings.ipBlackList.splice(this.index, 1, val)
        } else {
          this.settings.ipBlackList.push(val)
        }
      }
      if (this.type && this.flag) {
        if (!this.settings.ipWhiteList) this.settings.ipWhiteList = []
        if (!this.handleType) {
          this.settings.ipWhiteList.splice(this.index, 1, val)
        } else {
          this.settings.ipWhiteList.push(val)
        }
      }
      this.setClientConfig(this.LANG.SAVE_SUCCESS)
    },
    deleteItem(index, item) {
      this.$confirm(this.LANG.DELETE_CONFIRM, this.LANG.TIPS, {
        type: 'warning'
      })
        .then(() => {
          if (!this.type) {
            this.settings.accessLimitTimes.splice(
              (this.currentPage - 1) * this.pageSize + index,
              1
            )
            this.pagePrev(this.settings.accessLimitTimes.length)
          }
          if (this.type && !this.flag) {
            this.settings.ipBlackList.splice(
              (this.currentPage - 1) * this.pageSize + index,
              1
            )
            this.pagePrev(this.settings.ipBlackList.length)
          }
          if (this.type && this.flag) {
            this.settings.ipWhiteList.splice(
              (this.currentPage - 1) * this.pageSize + index,
              1
            )
            this.pagePrev(this.settings.ipWhiteList.length)
          }
          this.setClientConfig(this.LANG.DELETE_SUCCESS)
        })
        .catch(() => {})
    },
    //黑白名单切换事件
    choose(flag) {
      this.$nextTick(() => {
        this.flag = flag
        this.currentPage = 1
        this.setTable()
      })
    },

    // 提交到后台
    setClientConfig(successMsg) {
      let additionalInformation = {
        ...this.latestClientConfig.additionalInformation,
        accessLimit: this.settings
      }
      let settingsJSON = { ...this.latestClientConfig, additionalInformation }
      this.$store
        .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
        .then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: successMsg
            })
            this.close()
            this.setTable()
          }
        })
        .catch(() => {})
    },
    //访问时间选择不可在现在之前
    isExpired(time) {
      return new Date(time) <= new Date()
    },

    //表格数据渲染
    setTable() {
      this.ipBlack = []
      this.ipWhite = []
      this.dataList = !this.type
        ? this.settings.accessLimitTimes
        : !this.flag
        ? this.settings.ipBlackList
        : this.settings.ipWhiteList

      if (!this.type && this.dataList != []) {
        this.dataList.forEach((item) => {
          if (this.isExpired(item.time[1])) item.status = true
        })
      }
      if (this.settings.ipBlackList != [])
        this.settings.ipBlackList.forEach((item) => {
          this.ipBlack.push(item.ipAddress)
        })

      if (this.settings.ipWhiteList != [])
        this.settings.ipWhiteList.forEach((item) => {
          this.ipWhite.push(item.ipAddress)
        })

      this.total = this.dataList.length
      this.tableData = this.dataList.slice(
        (this.currentPage - 1) * this.pageSize,
        (this.currentPage - 1) * this.pageSize + this.pageSize
      )
      this.loading = false
    },
    //新建规则
    handleNewRule() {
      this.handleType = true
      this.show = true
      this.data = {}
    },
    close() {
      this.show = false
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.tableData = this.dataList.slice(
        (this.currentPage - 1) * val,
        (this.currentPage - 1) * val + val
      )
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.tableData = this.dataList.slice(
        (val - 1) * this.pageSize,
        (val - 1) * this.pageSize + this.pageSize
      )
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
}

::v-deep .fks-table th.is-leaf {
  border: none;
}

::v-deep .fks-button.left_black {
  width: 91px;
  border-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

::v-deep .fks-button.right_white {
  width: 91px;
  margin-right: 17px;
  margin-left: 0;
  border-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.container {
  height: calc(100% - 174px);
  overflow: auto;

  .access-table {
    position: relative;
    height: calc(100% - 30px);

    .button-line {
      height: 36px;
      margin: 13px 0 28px;
    }

    .tips {
      font-size: 14px;
      color: #666;
    }

    .pagination {
      position: absolute;
      bottom: 0;
      right: 0;
      align-items: center;
    }
  }
}
</style>